<template>
  <div>

    <!--提示框-->
    <el-dialog
      :visible.sync="isShow"
      title="识别网络图片文字"
      width="800px">
      <div>

        <div v-if="identifyArr.length">
          <p
            v-for="(v, k) in identifyArr"
            :key="k">{{ v.words }}</p>
        </div>

        <div v-else>
          <el-form label-width="80px">
            <el-form-item label="图片链接">
              <el-input v-model="upImageSrc"/>
            </el-form-item>
          </el-form>

          <img
            v-if="upImageSrc"
            :src="upImageSrc"
            style="max-width: 200px"
            alt="">
        </div>

      </div>
      <span
        slot="footer"
        class="dialog-footer">
        <el-button
          size="mini"
          @click="isShow = false">取 消</el-button>
        <el-button
          v-if="identifyArr.length"
          type="danger"
          size="mini"
          @click="clearData"
        >清 除</el-button>
        <el-button
          v-if="!identifyArr.length"
          :disabled="!upImageSrc"
          type="primary"
          size="mini"
          @click="imageInentifyBtnClick">
          识 别
        </el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import API from '@/api/apis'
import { get } from '@/api/ajax'
export default {
  name: 'WebToolImageIdentifyTextUrl',
  data() {
    return {
      // 识别出的文字
      identifyArr: [],
      // 上传文件图片路径
      upImageSrc: '',
      // 是否显示
      isShow: false
    }
  },
  methods: {
    // 清除数据
    clearData() {
      this.upImageSrc = ''
      this.identifyArr = []
    },
    // 图片识别按钮点击
    imageInentifyBtnClick() {
      this.$w_popview.showLoading('识别中...')
      get(API.baidu.urlTextIdentify, {
        srcImge: this.upImageSrc
      }).then((data) => {
        if (data && data.length > 0) {
          this.identifyArr = data
        } else {
          this.$w_popview.msgError('没有识别出文字')
        }
      }).catch(() => {
        this.identifyArr = []
      }).finally(() => {
        this.$w_popview.hideLoading()
      })
    },
    /**
     * 显示弹窗
     */
    show() {
      this.isShow = true
    },
  }
}
</script>

<style scoped>

</style>
